<!DOCTYPE html>
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('题目排序',~{::style})">
    <style type="text/css">
        .paperInfo {
            margin-left: 10px;
        }

        /* #region 拖拽样式*/
        .draggable-wrap {
            padding: 6px 10px;
            border: 1px dashed #eee;
            position: relative;
        }

        .draggable-item {
            margin: 10px;
            background: #fff;
            color: #333;
            border: 1px solid #4cae4c;
            /* background: #4cae4c; */
            padding: 6px 20px;
            border-radius: 6px;
            box-shadow: 0 1px 4px 0 #d0fff3;
        }
        .draggable-item_text {
            color: #4cae4c;
            font-weight: 600;
            font-size: 20px;
            margin-right: 10px;
        }
        .mask {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
        }
        .is-paper-done {
            color: red;
            font-size: 14px;
        }

        /* #endregion 拖拽样式*/
    </style>
</head>
<body>

<div id="content">
    <div class="paperInfo">
        <div>{{paperInfo.gradeCnName}} {{paperInfo.termName}}</div>
        <div>试卷类型: {{paperInfo.typeCnName}}</div>
        <div>试卷标题: {{paperInfo.paperName}}</div>
    </div>
    <div id="quesbank">
        <!--#region 拖拽-->
        <div class="draggable-wrap" v-show="listQuestionBanks.length">
            <div v-if="+isPaperDone === 1" class="mask">
            </div>
            <h4>按住一项可拖拽进行排序<span class="is-paper-done">{{isPaperDone === 1 ? '（该题已经有学生开始做了，不能修改题目顺序）' : ''}}</span></h4>
            <draggable v-model="listQuestionBanks">
                <div
                        v-for="(item, index) in listQuestionBanks"
                        v-if="item"
                        :key="index"
                        class="draggable-item">
                    序号：<span class="draggable-item_text">{{index + 1}}</span> ID:{{item.qbankId}} 【{{item.qmodeName}}】{{item.title}}
                </div>
            </draggable>
        </div>
        <!--#endregion 拖拽-->
    </div>
    <div class="box col-md-12" id="draggableSubmit">
        <fieldset style="text-align: center;">
            <legend contenteditable="false"></legend>
            <button class="btn btn-success" type="submit" onclick="submitForm(this);" id="btnSubmit" data-loading-text="加载中..." style="margin:0 20px;">提交</button>
        </fieldset>
    </div>
</div>

<div th:include="include/onload_js::onloadJSCustomEdit(~{::script})">
    <script type="text/javascript" src="../../static/js/vue.min.js" th:src="@{/static/js/vue.min.js}"></script>
    <!--#endregion 拖拽组件-->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
    <!--#endregion 拖拽组件-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
    <script type="text/javascript" th:inline="javascript">
        var ADMIN_TOKEN_STRING = "S6AsGHLhri4-VJyGrBfPsbEpD56SNSTScoolBwW7QTbpa65H-QbKisyjsEf9TD1WneWUxynXB7VupWEZWkCQ-A";

        /*<![CDATA[*/
        var paperId = /*[[${paperId}]]*/0;
        var isPaperDone = 0;// 加了权限，所以这个可以去掉 /*[[${isPaperDone}]]*/0; // 0 未做 1 做过
        /*]]>*/

        if (isPaperDone === 1) {
            $('#draggableSubmit').hide()
        }

        var app = new Vue({
            el: '#content',
            data: {
                paperInfo: {},
                listQuestionBanks: [],
                isPaperDone: isPaperDone
            },
            methods: {}
        });

        $(function () {
            console.log("init questionItems");
            initQuestionBanksList();
        });

        function initQuestionBanksList() {
            console.log("initQuestionItems ajax start")
            $.ajax({
                type: 'post',
                url: "/testPaper/question/info",
                data: {
                    "tokenString": ADMIN_TOKEN_STRING,
                    "testPaperId": paperId,
                },
                success: function (res) {
                    // console.log(JSON.stringify(res))
                    if (res.status == 1) {
                        var qlist = res.data.qlist;
                        // app.listQuestionBanks = qlist;
                        app.paperInfo = res.data.paperInfo;
                        app.listQuestionBanks = app.listQuestionBanks.concat(qlist);
                        // layer.msg("加载成功", {icon: 1});
                    } else {
                        layer.msg("加载失败", {icon: 2});
                    }
                }
            });
        }

        function submitForm(obj) {
            /** #region 提交之间对拖拽的数据进行排序 */
            var sortedListQuestionBanks = JSON.parse(JSON.stringify(app.listQuestionBanks))
            for (var item = 0; item < sortedListQuestionBanks.length; item++) {
                sortedListQuestionBanks[item].sort = item + 1
            }
            /** #region 提交之间对拖拽的数据进行排序 */
            var formData = {
                paperId: app.paperInfo.id,
                list: sortedListQuestionBanks
            }
            // console.log("formData:" + JSON.stringify(formData));

            $(obj).button('loading');
            $.ajax({
                type: 'post',
                url: "/testPaper/updatePaperQuestionSort?tokenString=" + ADMIN_TOKEN_STRING,
                dataType: "json",
                data: JSON.stringify(formData),
                contentType: "application/json",
                success: function (res) {
                    // console.log(JSON.stringify(res))
                    if (res.status == 1) {
                        top.layer.msg("操作成功", {icon: 1});
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });

            //恢复按钮状态
            $(obj).button('reset');
        }
    </script>
</div>
</body>
</html>
